@extends('home.layout.base')
<link rel="stylesheet" href="{{URL::asset('./css/hrmy/public.css')}}">
<link rel="stylesheet" href="{{URL::asset('./css/hrmy/safe_pass.css')}}">
<style>
.safeBtn {
    display: block;
    width: 90px;
    height: 30px;
    border: 0px;
    background: rgba(209, 0, 24, 1);
    border-radius: 2px;
    margin: auto;
    margin-top: 33px;
    left: -66px;
    position: relative;
    text-align: center;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 30px;
    color: rgba(255, 255, 255, 1)
}
</style>
@section('content')
<div class="mainHrContent" id="hrSafe">
    <div class="storelistTitle" id="storelistTitle"  v-cloak>
        <span class="storelistTitle_left">
            <span>
                <img src="{{URL::asset('./img/icon/home.png')}}">
            </span>
            <span><a href="{{route('home.index.index') }}">首页</a> >
                <a href="{{route('home.suppliermy.supplierIndex') }}">供应商中心</a>
                > 安全中心
            </span>
        </span>
        <!-- <span class="storelistTitle_right">
            <span>找不到合适的供应商？发个需求试试？</span>
            <button @click="window.location.href ='{{ route('home.demand.demandAdd')}}'">免费发布需求</button>
        </span> -->
    </div>
    <div class="hrContent">
        @include('home.suppliermy.menu')
        <div class="basicInfo" id="hrSafes"  v-cloak>
            <div class="basicInfo_title">
                <span></span>
                安全中心 > 手机号修改
            </div>
            <div class="userDetails">
                <el-form :model="form" :rules="rules" ref="ruleForm">
                    <el-form-item prop="mobile">
                        <p>
                            <span class="details_title">输入新手机号：</span>
                            <el-input v-model="form.mobile"></el-input>
                        </p>
                    </el-form-item>
                    <el-form-item prop="captcha" :rules="captchaRule" class="errInput">
                        <p>
                            <span class="details_title">图形验证码：</span>
                            <el-input style="width:140px;"  v-model="form.captcha"></el-input>
                            <img class="codeImg" style="width:130px;height: 40px;" @click="captchar" :src="captchaLink">
                            <span style="color: #888;font-size: 12px;"><i class="fa fa-question-circle-o"></i> 看不清，点击验证码换一张</span>
                        </p>
                    </el-form-item>
                    <el-form-item prop="code">
                        <p>
                            <span class="details_title">手机验证码：</span>
                            <el-input style="width:140px;" v-model="form.code"></el-input>
                            <a class="getCode" @click="getCode">获取验证码
                                <span v-if="codeBo">
                                    @{{'（'+codeTime+'）'}}
                                </span>
                            </a>
                        </p>
                    </el-form-item>
                    <button class="safeBtn" @click="submitForm('ruleForm')">保存修改</button>
            </div>
        </div>
    </div>
</div>
@endsection
@section('compontentScipts')
<script>
    $(() => {
        let hrSafe = new Vue({
            el: '#hrSafes',
            data: () => {
                return {
                    captchaLink: '',
                    form: {
                        mobile: '',
                        code: '',
                        captcha:''
                    },
                    captchaRule: [{
                        required: true,
                        message: '图形验证码不能为空',
                        trigger: 'blur'
                    }],
                    codeBo: false,
                    codeTime: 60,
                    rules: {
                        mobile: [{
                            required: true,
                            validator: validateTel,
                            trigger: 'blur'
                        }],
                        code: [{
                            required: true,
                            message: '验证码不能为空',
                            trigger: 'blur'
                        }],
                    },
                }
            },
            created() {
                this.captchar();
            },
            mounted() {},
            methods: {
                submitForm(formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            apiAjax("{{ route('home.user.userChangeMobileApi') }}", 'post', {
                                old_mobile: JSON.parse(sessionStorage.getItem("HRuserDetails")).mobile,
                                new_mobile: this.form.mobile,
                                code: this.form.code,
                            }, (res) => {
                                if (res.code == 0) {
                                    this.$message({
                                        message: res.msg,
                                        type: 'success'
                                    });
                                    window.location.href = "{{ route('home.login.login') }}";
                                } else {
                                    this.$message({
                                        message: res.msg,
                                        type: 'warning'
                                    });
                                }
                            }, (erro) => {

                            });
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                },
                getCode() {
                    if (this.codeTime == 60) {
                        if (!this.form.mobile) return this.$message({
                            message: '请输入您的手机号码！',
                            type: 'warning'
                        });
                        let reg = /^((13|14|15|16|17|18|19)[0-9]\d{8})$/
                        if (!reg.test(this.form.mobile)) return this.$message({
                            message: '请输入正确的联系电话！',
                            type: 'warning'
                        });
                        apiAjax("{{ route('home.phone.getSMS') }}", 'post', {
                            captcha: this.form.captcha,
                            phone: this.form.mobile
                        }, (res) => {
                            if (res.code == 0) {
                                this.$message({
                                    message: "验证码已发送至您的手机",
                                    type: 'success'
                                });
                            } else {
                                this.$message({
                                    message: res.msg,
                                    type: 'warning'
                                });
                            }

                        });
                    }
                },
                //图形验证码
                captchar(){
                    let that = this;
                    $.get("{{ route('admin.auth.captcha') }}",function(res){
                        that.captchaLink = res.data;
                    },'JSON ');
                },
            }
        })
    })
</script>
@endsection